@import 'common/utils';
/**
  * reach
  *
  * @author jh3y
*/
$items: 10;

@keyframes reach {
  0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
  }
  50% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
  }
}
.reach {
  --size: 10;
  @include sizeCSS(size);
  position: absolute;

  div {
    animation: reach 1s calc(var(--delay) * 1s) infinite ease;
    width: 50%;
    height: 150%;
    background: var(--primary);
    position: absolute;
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));

    @for $block from 1 through $items {
      &:nth-child(#{$block}) {
        --delay: #{$block * .1};
        --rotation: #{(360 / 10) * $block};
        --translation: 150;
      }
    }

  }

}